<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<canvas id="can" width="400" height="400"></canvas>
<script type="text/javascript">
    var can = document.getElementById("can");
    var ctx = can.getContext("2d");
    //创建圆滑块
    function createBlock(a,b){
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(a,b,30,0,Math.PI*2);
        ctx.fill();
    }
    //鼠标按下，将鼠标按下坐标保存在x,y中
    createBlock(50,50);
    can.onmousedown = function(ev){
        var e = ev||event;
        var x = e.clientX;
        var y = e.clientY;
        drag(x,y);
    };
    //拖拽函数
    function drag(x,y){
        // 按下鼠标判断鼠标位置是否在圆上，当画布上有多个路径时，isPointInPath只能判断最后那一个绘制的路径
        if(ctx.isPointInPath(x,y)){
            //路径正确，鼠标移动事件
            can.onmousemove = function(ev){
                var e = ev||event;
                var ax = e.clientX;
                var ay = e.clientY;
                //鼠标移动每一帧都清楚画布内容，然后重新画圆
                ctx.clearRect(0,0,can.width,can.height);
                createBlock(ax,ay);
            };
            //鼠标移开事件
            can.onmouseup = function(){
                can.onmousemove = null;
                can.onmouseup = null;
            };
        };
    }
</script>
</body>
</html>